<template>
  <div v-if="value || isEditing">
    <a-form-item :label="label" :colon="false">
      <a-select
        v-if="isEditing"
        v-model:value="inputValue"
        @blur="finishEdit"
        @change="finishEdit"
        placeholder="请选择性别"
        style="width: 120px"
      >
        <a-select-option value="男">男</a-select-option>
        <a-select-option value="女">女</a-select-option>
      </a-select>
      <span v-else @click="startEdit" style="cursor: pointer;">{{ value || '点击选择性别' }}</span>
    </a-form-item>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{
  value: string
  label: string
  itemId: string
}>()

const emit = defineEmits<{
  (e: 'update', id: string, value: string): void
}>()

const isEditing = ref(false)
const inputValue = ref(props.value)

// 开始编辑
const startEdit = () => {
  isEditing.value = true
  inputValue.value = props.value
}

// 完成编辑
const finishEdit = () => {
  isEditing.value = false
  emit('update', props.itemId, inputValue.value)
}

// 监听props.value变化
watch(() => props.value, (newValue) => {
  inputValue.value = newValue
})
</script>